<template>
  <div class="main">
    <div class="fugai">
      <div class="jiemian">
        <div class="jiemian-kuan">
          <!-- 上边第一行 -->
          <div class="shan-kuan">
            <div class="shan-kuan-one" @click="home()">音乐播放器</div>
            <div class="shan-kuan-two">
              <div class="two" @click="tui">
                <van-icon class="text-img" name="arrow-left" />
              </div>
              <div class="two" @click="jin">
                <van-icon class="text-img" name="arrow" />
              </div>
            </div>
            <div class="shan-kuan-three">
              <van-search
                v-model="value"
                shape="round"
                placeholder="请输入搜索关键词"
                class="search"
                @focus="searchONE"
                @blur="searchTWO"
                @search="onSearch"
              />
              <div class="history" v-if="ishistory">
                <div class="history-one test-1">
                  <div class="text">历史记录</div>
                  <div class="history-text">
                    <div
                      class="xiao"
                      v-for="(item, index) in history"
                      :key="index"
                    >
                      <div class="kuan" @click="lishi(index)">{{ item }}</div>
                    </div>
                    <div class="clear"></div>
                  </div>
                  <div class="text">热门搜索</div>
                  <div
                    class="hot-kuan"
                    v-for="(item, index) in hotshuju"
                    :key="index"
                    @click="lishiOne(item.searchWord)"
                  >
                    <div class="hot-one left" :class="[index < 3 ? 'hon' : '']">
                      {{ index + 1 }}
                    </div>
                    <div class="hot-two left">
                      {{ item.searchWord }} <span>{{ item.score }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="shan-kuan-four">
              <div class="shan-tui-img" v-if="ifEavrOne">
                <img
                  @click="SignIn()"
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F91%2F43%2F59829d955c0aa_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655292815&t=a9d0c49994018f5fb82151f1782437cc"
                  alt=""
                />
              </div>
              <div class="shan-tui-img" v-if="ifEavr">
                <img :src="images" alt="" />
              </div>
              <div v-if="ifEavrOne" class="shan-tui" @click="SignIn()">
                请登录
              </div>
              <div v-if="ifEavr" class="shan-tui">{{ usename }}</div>
            </div>
          </div>
          <!-- 中间内容区-->
          <router-view></router-view>
          <div class="xia-kuan">
            <audio
              id="audio"
              :src="t2"
              ref="audio"
              @canplay="startPlay(t1)"
              @ended="audioEnd(t1)"
              autoplay
            ></audio>
            <div class="Lyric" v-show="isLyric">
              <div class="content">
                <!-- 歌词 -->
                <div
                  class="song-text test-2"
                  ref="messagesContainer"
                >
                  <div class="content-kuan-three"></div>
                  <div
                    class="song-text-one"
                    v-for="(item, index) in geci"
                    :key="index"
                    :data-time="shijiandian[index]"
                    :class="[index == iiiiiiii ? 'active' : '']"
                  >
                    {{ item }}
                  </div>
                  <div class="content-kuan-three"></div>
                </div>
                <div class="content-kuan-one"></div>
                <div class="content-kuan-two"></div>
              </div>
            </div>
            <div class="xia-kuan-one">
              <div class="xia-kuan-one-img" @click="LyricThree()">
                <img :src="urlname" />
              </div>
              <div class="xia-kuan-one-text">
                {{ picUrl }}
              </div>
            </div>
            <div class="xia-kuan-two" @mouseup="mouseupShijianONE">
              <div class="two-two">
                <div class="img-one">
                  <img src="../assets/7.png" alt="" @click="shang(t1)" />
                </div>
                <!-- data-play: 0 ==> 暂停, 1 ==> 播放 -->
                <div class="img-two">
                  <img :src="srcImg" alt="" @click="qiehuan(moshi, t2)" />
                </div>
                <div class="img-three">
                  <img src="../assets/4.png" alt="" @click="xia(t1)" />
                </div>
              </div>
              <div class="two-three">
                <div
                  id="boxiiii"
                  ref="barparent2"
                  class="slider"
                  @mouseleave="onmouseleave()"
                  @mousedown="mousedownShijian($event)"
                  @mousemove="mousemoveShijian($event)"
                  @mouseup="mouseupShijian($event)"
                >
                  <!-- <div class="buffer"></div> -->
                  <div class="processor" :style="styleObject"></div>
                  <div
                    id="controller"
                    :style="ObjectOne"
                    class="controller"
                  ></div>
                </div>
                <div class="two-three-text-one">{{ zonshijianformatTime }}</div>
                <div class="two-three-text-two">
                  {{ danqianshijianformatTime }}
                </div>
              </div>
            </div>
            <div class="xia-kuan-three">
              <div class="three-kuan">
                <van-icon name="wap-nav" @click="qiehuanOne()" />
              </div>
              <div class="zz" v-if="classStyle" @click.self="zzshijian()">
                <div class="three-kuan-one">
                  <div class="three-text-one">
                    <div class="text-one">序号</div>
                    <div class="text-two">歌名</div>
                  </div>
                  <div class="three-text-ge-kuan test-1">
                    <div
                      class="three-text-ge"
                      v-for="(item, index) in t1"
                      :key="index"
                      :class="[
                        index % 2 == 0 ? 'accicon' : '',
                        item.id == ididid ? 'acciconOne' : '',
                      ]"
                    >
                      <div
                        class="text-one"
                        @click="
                          TransmitData(
                            item.id,
                            index,
                            item.al.picUrl,
                            item.name
                          )
                        "
                      >
                        {{ index + 1 }}
                      </div>
                      <div
                        class="text-two"
                        @click="
                          TransmitData(
                            item.id,
                            index,
                            item.al.picUrl,
                            item.name
                          )
                        "
                      >
                        {{ item.name }}
                      </div>
                      <div class="text-three">
                        <van-icon name="delete-o" @click="shanchu(index, t1)" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Main",
  data() {
    return {
      images:
        "https://p1.music.126.net/LybYdNS4KSOzmrrkkmzPZw==/109951165966160218.jpg",
      hotshuju: [],
      history: [],
      ishistory: false,
      srcImg: require("../assets/6.png"),
      value: "",
      activeIndex: 0,
      ifEavr: false,
      ifEavrOne: true,
      usename: "",
      moshi: 0,
      classStyle: false,
      isPlay: false,
      ididid: "",
      idid: 0,
      styleObject: {
        width: "0px",
      },
      ObjectOne: {
        left: "-2px",
      },
      isMousemove: false,
      picUrl: "",
      urlname: "",
      isLyric: false,
      Lyric: "",
      geci: [],
      don: {
        marginTop: "300px",
      },
      // songlrc: 30,
      // songlrcOne: 300,
      zonshijian: 0,
      danqianshijian: 0,
      shijiandian: [],
      iiiiiiii: 0,
      zonshijianformatTime: "00:00",
      danqianshijianformatTime: "00:00",
      shijianjiedian: 0,
      baifenbi: "",
    };
  },
  computed: {
    t1() {
      return this.$store.state.zon;
    },
    t2() {
      return this.$store.state.mp3;
    },
    t3() {
      return this.$store.state.isPlay;
    },
  },
  created() {
    this.gai();
    this.gaiOne();
    this.hot();
    this.shijian();
  },
  methods: {
    //歌词滚动条
    scrool(e) {
      setInterval(() => {
        let target = document.querySelector(".active");
        // console.log("target==>", target);
        let parent = document.querySelector(".song-text");
        // console.log("parent==>", parent);
        // parent.scrollTop = target.offsetTop - parent.offsetTop - 250;
        document.querySelector(".active").scrollIntoView({ block: 'center' });
      }, 1000);
    },
    //关闭遮罩层
    zzshijian() {
      this.classStyle = false;
    },
    //删除
    shanchu(iii, e) {
      let playshuju = this.$store.state.play;
      for (let t = 0; t < playshuju.length; t++) {
        if (e[iii].id == playshuju[t]) {
          playshuju.splice(t, 1);
          this.$store.state.play = playshuju;
        }
      }
      if (e.length == 1) {
        // console.log("1111");
        this.$store.state.mp3 = "";
        this.qiehuan(this.moshi);
        this.geci = [];
        this.zonshijian = 0;
        this.Lyric = "";
        this.$store.commit("updateLyric", { data: "" });
        this.$store.commit("updateL", { data: "" });
        this.$store.commit("updateI", {
          data: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F91%2F43%2F59829d955c0aa_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655292815&t=a9d0c49994018f5fb82151f1782437cc",
        });
        this.shijiandian = [];
        this.don.marginTop = "300px";
        this.styleObject.width = "0px";
        this.ObjectOne.left = "-2px";
        this.danqianshijian = 0;
        this.$store.commit("updateshanchu", { data: iii });
        this.zonshijianformatTime = "00:00";
        this.danqianshijianformatTime = "00:00";
        return;
      }
      if (e[iii].id == this.ididid) {
        for (let i = 0; i < e.length; i++) {
          // console.log(e[i].id);
          if (e[i].id == this.ididid) {
            if (i + 1 == e.length) {
              i = 0;
              this.ididid = e[i].id;
              // console.log('e[i]==>',e[i]);
              this.axios({
                method: "get",
                url: "/song/detail?ids=" + e[i].id,
              })
                .then((result) => {
                  // console.log("result==>", result);
                  // this.$store.commit("updateOne", { data: result.data.data[0].url });
                  this.picUrl = result.data.songs[0].name;
                  this.urlname = result.data.songs[0].al.picUrl;
                  this.$store.commit("updateL", { data: this.picUrl });
                  this.$store.commit("updateI", { data: this.urlname });
                  this.$store.commit("updateshanchu", { data: iii });
                })
                .catch((err) => {
                  console.log("err==>", err);
                });
            } else {
              i = i + 1;
              this.ididid = e[i].id;
              this.axios({
                method: "get",
                url: "/song/detail?ids=" + e[i].id,
              })
                .then((result) => {
                  // console.log("result==>", result.data.songs[0].al.picUrl);
                  // this.$store.commit("updateOne", { data: result.data.data[0].url });
                  this.picUrl = result.data.songs[0].name;
                  this.urlname = result.data.songs[0].al.picUrl;
                  this.$store.commit("updateL", { data: this.picUrl });
                  this.$store.commit("updateI", { data: this.urlname });
                  this.$store.commit("updateshanchu", { data: iii });
                })
                .catch((err) => {
                  console.log("err==>", err);
                });
            }
          }
        }
        // console.log("this.ididid==>", this.ididid);
        this.TransmitData(this.ididid);
      } else {
        this.$store.commit("updateshanchu", { data: iii });
      }
    },
    gai() {
      setInterval(() => {
        this.Lyric = this.$store.state.Lyric;
        this.$store.state.activeIndex = this.activeIndex;
        this.ifEavr = this.$store.state.ifEavr;
        this.ifEavrOne = this.$store.state.ifEavrOne;
        this.usename = this.$store.state.name;
        this.picUrl = this.$store.state.picUrl;
        this.urlname = this.$store.state.urlname;
        this.history = this.$store.state.historyindex;
        // this.shijian();
      }, 100);
    },
    gaiOne() {
      setInterval(() => {
        this.shijian();
      }, 500);
    },
    shijian() {
      setInterval(() => {
        this.zonshijian = this.$refs.audio.duration;
        this.danqianshijian = Math.floor(this.$refs.audio.currentTime);
        for (let i = 0; i < this.shijiandian.length; i++) {
          if (this.shijiandian[i] == this.danqianshijian) {
            this.iiiiiiii = i;
            break;
          }
        }
      }, 1000);
    },
    LyricOne() {
      setTimeout(() => {
        this.geci = [];
        if (this.Lyric == "") {
          this.geci.push("纯音乐");
          return;
        }
        //保存歌词
        let lrc = this.Lyric.split(/\n/);
        // console.log(lrc);
        lrc.forEach((v, i) => {
          if (v.length === 0) {
            return;
          }
          let lrcData = v.split(/\] ?/);
          // console.log('lrcData==>',lrcData);
          //时间
          let time = lrcData[0].slice(1).split(/:/);
          // console.log('time==>',time);
          let minutes = Number(time[0]);
          // console.log('minutes==>',minutes);
          let seconds = Number(time[1]);
          // console.log('seconds==>',seconds);
          time = Number(minutes * 60 + seconds);
          time = Math.floor(time);
          this.shijiandian.push(time);
          // console.log('this.shijiandian==>',this.shijiandian);
          // console.log("time==>", time);
          let text = lrcData[1];
          // console.log("text==>", text);
          if (text == "") {
            this.geci.push("");
          } else {
            this.geci.push(text);
          }
        });
        // console.log(this.geci);
        // this.LyricTwo();
      }, 1000);
    },
    // LyricTwo() {
    //   setTimeout(() => {
    //     let songlrc = document.querySelector(".song-lrc");
    //     this.songlrc = songlrc.offsetHeight;
    //     console.log("songlrc==>", songlrc.offsetHeight);
    //   }, 2000);
    // },
    //处理时间格式 mm:ss
    formatTime(second) {
      var minutes = Math.floor(second / 60);
      minutes = minutes >= 10 ? minutes : "0" + minutes;
      var seconds = Math.floor(second % 60);
      seconds = seconds >= 10 ? seconds : "0" + seconds;
      return minutes + ":" + seconds;
    },
    onmouseleave(){
      this.isMousemove = false;
    },
    //mousedown（鼠标按下）,mousemove（鼠标移动），mouseup（鼠标按键抬起）
    mousedownShijian(e) {
      this.isMousemove = true;
      const parentClientWidth = Math.floor(this.$refs.barparent2.clientWidth);
      let Left = this.$refs.barparent2.getBoundingClientRect().left;
      let x = e.x - Left; //获取鼠标的X坐标（鼠标与屏幕左侧的距离，单位为px）
      if (x < 0) {
        return;
      } else if (x > parentClientWidth) {
        return;
      } else {
        let m = document.querySelector("audio").duration; //获取视频的总时长
        let time = Math.round(m * (x / parentClientWidth));
        var audio = this.$refs.audio;
        audio.currentTime = time;
        this.danqianshijianformatTime = this.formatTime(this.danqianshijian);
        this.zonshijianformatTime = this.formatTime(this.zonshijian);
      }
      this.styleObject.width = x - 5 + "px";
      this.ObjectOne.left = x - 5 + "px";
    },
    mousemoveShijian(e) {
      if (this.isMousemove) {
        const parentClientWidth = Math.floor(this.$refs.barparent2.clientWidth);
        let Left = this.$refs.barparent2.getBoundingClientRect().left;
        let x = e.x - Left; //获取鼠标的X坐标（鼠标与屏幕左侧的距离，单位为px）
        if (x < 0) {
          return;
        } else if (x > parentClientWidth) {
          return;
        } else {
          let m = document.querySelector("audio").duration; //获取视频的总时长
          let time = Math.round(m * (x / parentClientWidth));
          var audio = this.$refs.audio;
          audio.currentTime = time;
          this.danqianshijianformatTime = this.formatTime(this.danqianshijian);
          this.zonshijianformatTime = this.formatTime(this.zonshijian);
        }
        this.styleObject.width = x + "px";
        this.ObjectOne.left = x + "px";
      }
    },
    mouseupShijian(e) {
      this.isMousemove = false;
      const parentClientWidth = Math.floor(this.$refs.barparent2.clientWidth);
      let Left = this.$refs.barparent2.getBoundingClientRect().left;
      let x = e.x - Left; //获取鼠标的X坐标（鼠标与屏幕左侧的距离，单位为px）
      if (x < 0) {
        return;
      } else if (x > parentClientWidth) {
        return;
      } else {
        let m = document.querySelector("audio").duration; //获取视频的总时长
        let time = Math.round(m * (x / parentClientWidth));
        var audio = this.$refs.audio;
        audio.currentTime = time;
        this.danqianshijianformatTime = this.formatTime(this.danqianshijian);
        this.zonshijianformatTime = this.formatTime(this.zonshijian);
      }
      this.styleObject.width = x + "px";
      this.ObjectOne.left = x + "px";
    },
    mouseupShijianONE(){
      this.isMousemove = false;
    },
    show(e) {
      // console.log(e);
      // var box = document.getElementById("boxiiii");
      // 打印盒子的宽度和高度
      // var xxx = box.offsetWidth;
      // console.log("xxx==>", xxx);
      const parentClientWidth = Math.floor(this.$refs.barparent2.clientWidth);
      let Left = this.$refs.barparent2.offsetLeft;
      let x = e.x - Left; //获取鼠标的X坐标（鼠标与屏幕左侧的距离，单位为px）
      if (x < 0) {
        return;
      } else if (x > parentClientWidth) {
        return;
      } else {
        let m = document.querySelector("audio").duration; //获取视频的总时长
        let time = Math.round(m * (x / parentClientWidth));
        var audio = this.$refs.audio;
        audio.currentTime = time;
        audio.pause();
      }
      this.styleObject.width = x + "px";
      this.ObjectOne.left = x + "px";
    },
    xia(e) {
      if (e == "") {
        return;
      }
      // console.log(this.ididid);
      // console.log(e);
      for (let i = 0; i < e.length; i++) {
        // console.log(e[i].id);
        if (e[i].id == this.ididid) {
          if (i + 1 == e.length) {
            i = 0;
            this.ididid = e[i].id;
            this.axios({
              method: "get",
              url: "/song/detail?ids=" + e[i].id,
            })
              .then((result) => {
                // console.log("result==>", result);
                // this.$store.commit("updateOne", { data: result.data.data[0].url });
                this.picUrl = result.data.songs[0].name;
                this.urlname = result.data.songs[0].al.picUrl;
                this.$store.commit("updateL", { data: this.picUrl });
                this.$store.commit("updateI", { data: this.urlname });
              })
              .catch((err) => {
                console.log("err==>", err);
              });
          } else {
            i = i + 1;
            this.ididid = e[i].id;
            this.axios({
              method: "get",
              url: "/song/detail?ids=" + e[i].id,
            })
              .then((result) => {
                // console.log("result==>", result.data.songs[0].al.picUrl);
                // this.$store.commit("updateOne", { data: result.data.data[0].url });
                this.picUrl = result.data.songs[0].name;
                this.urlname = result.data.songs[0].al.picUrl;
                this.$store.commit("updateL", { data: this.picUrl });
                this.$store.commit("updateI", { data: this.urlname });
              })
              .catch((err) => {
                console.log("err==>", err);
              });
          }
        }
      }
      // console.log("this.ididid==>", this.ididid);
      this.TransmitData(this.ididid);
    },
    shang(e) {
      if (e == "") {
        return;
      }
      // console.log(this.ididid);
      // console.log(e);
      for (let i = 0; i < e.length; i++) {
        // console.log(e[i].id);
        if (e[i].id == this.ididid) {
          if (i - 1 == -1) {
            i = e.length - 1;
            this.ididid = e[i].id;
            this.axios({
              method: "get",
              url: "/song/detail?ids=" + e[i].id,
            })
              .then((result) => {
                // console.log("result==>", result);
                // this.$store.commit("updateOne", { data: result.data.data[0].url });
                this.picUrl = result.data.songs[0].name;
                this.urlname = result.data.songs[0].al.picUrl;
                this.$store.commit("updateL", { data: this.picUrl });
                this.$store.commit("updateI", { data: this.urlname });
              })
              .catch((err) => {
                console.log("err==>", err);
              });
          } else {
            i = i - 1;
            this.ididid = e[i].id;
            this.axios({
              method: "get",
              url: "/song/detail?ids=" + e[i].id,
            })
              .then((result) => {
                // console.log("result==>", result);
                // this.$store.commit("updateOne", { data: result.data.data[0].url });
                this.picUrl = result.data.songs[0].name;
                this.urlname = result.data.songs[0].al.picUrl;
                this.$store.commit("updateL", { data: this.picUrl });
                this.$store.commit("updateI", { data: this.urlname });
              })
              .catch((err) => {
                console.log("err==>", err);
              });
          }
        }
      }
      // console.log("this.ididid==>", this.ididid);
      this.TransmitData(this.ididid);
    },
    TransmitData(e, index, i, l) {
      // console.log(e);
      this.$store.commit("updateTwo", { data: e });
      this.$store.commit("updateL", { data: l });
      this.$store.commit("updateI", { data: i });
      this.axios({
        method: "get",
        url: "/song/url?id=" + e,
      })
        .then((result) => {
          // console.log("result==>", result);
          this.$store.commit("updateOne", { data: result.data.data[0].url });
        })
        .catch((err) => {
          console.log("err==>", err);
        });
      this.axios({
        method: "get",
        url: "/lyric?id=" + e,
      })
        .then((result) => {
          // console.log("result==>", result);
          // console.log("result==>", result.data.lrc.lyric);

          this.$store.commit("updateLyric", { data: result.data.lrc.lyric });
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    qiehuanOne() {
      if (this.classStyle) {
        this.classStyle = false;
      } else {
        this.classStyle = true;
      }
    },
    startPlay(E) {
      this.songlrc = 30;
      this.songlrcOne = 300;
      this.zonshijian = 0;
      this.danqianshijian = 0;
      this.shijiandian = [];
      this.don.marginTop = "300px";
      this.LyricOne();
      // console.log(this.$store.state.id);
      this.ididid = this.$store.state.id;
      this.$refs.audio.play(); // 这里使用了audio的原生开始播放事件,同样不加on, 并使用ref获取dom
      this.isPlay = true;
      this.srcImg =
        "";

      this.moshi = 1;
      setInterval(() => {
        if (E == "") {
          return;
        }
        let prog = Number(
          (
            (this.$refs.audio.currentTime / this.$refs.audio.duration) *
            100
          ).toFixed(2)
        );
        this.baifenbi = prog;
        this.styleObject.width = prog + "%";
        this.ObjectOne.left = prog - 1 + "%";
        this.danqianshijianformatTime = this.formatTime(this.danqianshijian);
        this.zonshijianformatTime = this.formatTime(this.zonshijian);
        // console.log(prog);
      }, 1000);
    },
    qiehuan(v, E) {
      // console.log(v);
      if (E == "") {
        return;
      }
      if (v == 0) {
        // console.log(111)
        this.$refs.audio.play(); // 这里使用了audio的原生开始播放事件,同样不加on, 并使用ref获取dom
        this.isPlay = true;
        this.srcImg =
          "";
        this.moshi = 1;
      } else {
        this.srcImg = require("../assets/6.png");
        this.moshi = 0;
        this.isPlay = false;
        this.$refs.audio.pause();
        clearTimeout(setInterval);
      }
    },
    // 音频停止后, 把喇叭置灰
    audioEnd(e) {
      this.xia(e);
      if (this.moshi == 0) {
        this.isPlay = true;
        this.srcImg =
          "";
        this.moshi = 1;
      } else {
        this.srcImg = require("../assets/6.png");
        this.moshi = 0;
        this.isPlay = false;
      }
    },
    tui() {
      this.$router.go(-1);
    },
    jin() {
      this.$router.go(+1);
    },
    home() {
      this.activeIndex = 0;
      this.$router.push({ name: "Home" });
    },
    LyricThree() {
    this.scrool();
      if (this.isLyric) {
        this.isLyric = false;
      } else {
        this.isLyric = true;
      }
    },
    SignIn() {
      this.$router.push({ name: "SignIn" });
    },
    onSearch(val) {
      // Toast(val);
      this.ishistory = false;
      for (let i = 0; i < this.history.length; i++) {
        if (val == this.history[i]) {
          console.log("下标为" + i, "文字为" + this.history[i]);
          this.$store.commit("updateshift", { data: i });
          break;
        }
      }
      if (val !== "") {
        this.$router.push({ name: "Result", params: { val } });
        this.value = "";
        this.$store.commit("updatehistoryindex", { data: val });
      } else {
        Toast("请输入搜索关键词");
      }
    },
    //热门搜索列表
    hot() {
      this.axios({
        method: "get",
        url: "/search/hot/detail",
      })
        .then((result) => {
          this.hotshuju = result.data.data;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //历史记录
    lishi(i) {
      // console.log(i);
      this.value = this.history[i];
      this.onSearch(this.value);
    },
    lishiOne(val) {
      this.onSearch(val);
    },
    searchONE() {
      this.ishistory = true;
    },
    searchTWO() {
      setTimeout(() => {
        this.ishistory = false;
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .van-search__content {
  background-color: rgb(255, 169, 169);
  color: white;
}
::v-deep .van-cell {
  color: white;
}
::v-deep .van-field__control {
  color: white;
}
.fugai {
  width: 100vw;
  height: 100vh;
}
@media screen and (min-width: 1441px) {
  .fugai {
    background-image: url("https://desk-fd.zol-img.com.cn/t_s960x600c5/g7/M00/01/08/ChMkK2JHsCKIcvYcADuLtLfGu2IAACGEwKqUlUAO4vM911.jpg");
    background-repeat: no-repeat;
    background-size: 1920px 100%;
  }
}
@media screen and (max-width: 1440px) and (min-width: 0px) {
  .fugai {
    background-image: url("https://desk-fd.zol-img.com.cn/t_s1440x900c5/g7/M00/01/08/ChMkLGJHsEOILy6OAAVRQbF-UysAACGFgFRr9gABVFZ059.jpg");
    background-repeat: no-repeat;
    background-size: 1440px 100%;
  }
}
.left {
  float: left;
}
.clear {
  clear: both;
  width: 100%;
  height: 1px;
}
::placeholder {
  color: #ffffff;
  font-size: 12px;
}
.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #b3b3b3;
}
.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background: #ededed;
}
.test-2::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-2::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #b3b3b3;
}
.test-2::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background: #ededed;
}
::v-deep input.van-field__control::-webkit-input-placeholder {
  color: #e9e9e9;
  font-size: 13px;
}
.jiemian {
  width: 950px;
  height: calc(100% - 50px);
  padding: 25px 0;
  margin: 0 auto;
  overflow: hidden;
  .jiemian-kuan {
    width: 950px;
    height: 610px;
    background-color: white;
    overflow: hidden;
    .shan-kuan {
      width: 100%;
      height: 50px;
      background-color: rgb(255, 97, 97);
      .shan-kuan-one {
        float: left;
        width: 25%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: white;
        font-size: 19px;
        font-weight: 300;
        cursor: pointer;
      }
      .shan-kuan-two {
        float: left;
        width: 10%;
        height: 50px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row;
        .two {
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          border-radius: 50%;
          border: 1px solid white;
          cursor: pointer;
          .text-img {
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 15px;
            color: white;
          }
        }
      }
      .shan-kuan-three {
        float: left;
        width: 30%;
        height: 50px;
        position: relative;
        .search {
          width: 100%;
          height: 100%;
          color: white;
          background-color: rgb(255, 97, 97);
        }
        .history {
          width: 100%;
          height: 400px;
          background-color: white;
          border: 1px solid rgb(233, 233, 233);
          position: absolute;
          left: 0px;
          top: 55px;
          z-index: 3;
          padding: 10px 0px;
          .history-one {
            width: 100%;
            height: 400px;
            overflow-y: scroll;
            .text {
              width: calc(100% - 20px);
              height: 30px;
              line-height: 30px;
              padding: 0px 10px;
              font-size: 11px;
              color: #a8a8a8;
            }
            .history-text {
              width: 100%;
              .xiao {
                width: calc(25% - 10px);
                height: 16px;
                padding: 2px 5px;
                line-height: 16px;
                float: left;
                .kuan {
                  text-align: center;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  border-radius: 2px;
                  cursor: pointer;
                  background-color: #f5f5f5;
                }
              }
            }
            .hot-kuan {
              width: 100%;
              height: 35px;
              line-height: 35px;
              color: #cdcdcd;
              cursor: pointer;
              .hot-one {
                width: 35px;
                height: 35px;
                text-align: center;
              }
              .hot-two {
                width: 87%;
                height: 35px;
                color: #292929;
                span {
                  color: #cdcdcd;
                }
              }
            }
            .hon {
              color: red;
            }
            .hot-kuan:hover {
              background-color: #eeeeee;
            }
          }
        }
      }
      .shan-kuan-four {
        float: left;
        width: 200px;
        height: 50px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        .shan-tui {
          width: 50px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          color: white;
          cursor: pointer;
        }
        .shan-tui-img {
          width: 30px;
          height: 30px;
          padding: 10px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .shan-tui:hover {
          color: rgb(145, 145, 145);
        }
      }
    }
    .xia-kuan {
      width: 100%;
      height: 59px;
      border-top: 1px solid rgb(219, 219, 219);
      background-color: rgb(255, 255, 255);
      position: relative;
      .xia-kuan-one {
        width: calc(30% - 40px);
        height: 59px;
        float: left;
        padding: 0 20px;
        .xia-kuan-one-img {
          float: left;
          width: 41px;
          height: 41px;
          padding: 4px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
        }
        .xia-kuan-one-text {
          float: left;
          width: calc(80% - 8px);
          height: 59px;
          line-height: 59px;
          padding: 0 4px;
          font-size: 11px;
          color: #575757;
        }
      }
      .xia-kuan-two {
        width: 40%;
        height: 59px;
        float: left;
        display: flex;
        flex-direction: column;
        align-items: center;
        .two-two {
          width: 60%;
          height: 40px;
          float: left;
          display: flex;
          flex-direction: row;
          justify-content: space-evenly;
          align-items: center;
          .img-one {
            width: 25px;
            height: 25px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .img-two {
            width: 30px;
            height: 30px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .img-three {
            width: 25px;
            height: 25px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .two-three {
          width: 100%;
          height: 11px;
          padding-top: 8px;
          position: relative;
          .two-three-text-one {
            width: 30px;
            height: 14px;
            position: absolute;
            top: 3px;
            left: -30px;
            line-height: 14px;
            text-align: center;
          }
          .two-three-text-two {
            width: 30px;
            height: 14px;
            position: absolute;
            top: 3px;
            right: -32px;
            line-height: 14px;
            text-align: center;
          }
        }
      }
      .xia-kuan-three {
        width: 29%;
        height: 59px;
        float: left;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        .three-kuan {
          width: 30px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          font-size: 20px;
          margin-right: 10px;
          cursor: pointer;
        }
        .three-kuan-one {
          width: 30%;
          height: 300px;
          position: absolute;
          right: 0px;
          bottom: 59px;
          z-index: 6;
          font-size: 11px;
          padding-top: 10px;
          background-color: rgb(255, 255, 255);
          border-radius: 10px 10px 0 0;
          border-top: 1px solid rgb(150, 150, 150);
          border-left: 1px solid rgb(150, 150, 150);
          border-right: 1px solid rgb(150, 150, 150);
          .three-text-one {
            width: 100%;
            height: 20px;
            .text-one {
              float: left;
              width: 20%;
              height: 20px;
              text-align: center;
              line-height: 20px;
            }
            .text-two {
              float: left;
              width: 80%;
              height: 20px;
              line-height: 20px;
            }
          }
          .three-text-ge-kuan {
            width: 100%;
            height: 275px;
            overflow-y: scroll;
            .three-text-ge {
              width: 100%;
              height: 20px;
              cursor: pointer;
              .text-one {
                float: left;
                width: 20%;
                height: 20px;
                text-align: center;
                line-height: 20px;
              }
              .text-two {
                float: left;
                width: 70%;
                height: 20px;
                line-height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .text-three {
                float: left;
                width: 10%;
                height: 20px;
                line-height: 20px;
                text-align: center;
              }
            }
            .three-text-ge:hover {
              background-color: rgb(223, 222, 222);
            }
          }
        }
      }
    }
  }
}
.accicon {
  background-color: rgb(245, 245, 245);
}
.acciconOne {
  background-color: rgb(223, 222, 222);
}
.slider {
  width: 100%;
  height: 3px;
  background-color: #535353;
  // border-top: 1px solid #0b0b0b;
  // border-bottom: 1px solid #4a4a4a;
  position: relative;
  cursor: pointer;
}
.processor {
  height: 3px;
  background-color: #c70c0c;
}
.controller {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #ffffff;
  position: absolute;
  z-index: 5;
  top: -2.8px;
  border: 1px solid rgb(214, 214, 214);
}
.Lyric {
  width: 950px;
  height: 500px;
  position: absolute;
  z-index: 1;
  left: 0px;
  bottom: 60px;
  background-color: rgb(180, 200, 238);
  .content {
    background-color: rgb(219, 219, 219);
    width: 100%;
    height: calc(100% - 40px);
    padding-top: 40px;
    position: relative;
    .content-kuan-three {
      width: 100%;
      height: 250px;
    }
    .content-kuan-one {
      width: 100%;
      height: 250px;
      position: absolute;
      top: 0px;
      left: 0px;
      background: -webkit-gradient(linear, 0 0, 0 100%, from(#cdcdcd), to(#32323300));
    }
    .content-kuan-two {
      width: 100%;
      height: 250px;
      position: absolute;
      top: 250px;
      left: 0px;
      background: -webkit-gradient(linear, 0 0, 0 100%, from(#64656600), to(#cdcdcd));
    }
  }
  .song-text {
    width: 100%;
    height: 420px;
    z-index: 2;
    overflow: hidden;
    overflow-y: scroll;
  }

  .song-box {
    text-align: center;
    position: relative;
    /* top: 186px; */
  }
  .song-lrc {
    padding: 5px 0;
    color: rgb(121, 121, 121);
  }

  .active {
    color: #e4393c;
  }
}
.song-text-one {
  padding: 5px 0;
  text-align: center;
  height: 15px;
  line-height: 15px;
}
.zz {
  position: absolute;
  top: -551px;
  z-index: 5;
  left: -665px;
  width: 950px;
  height: 610px;
  background-color: rgba(0, 0, 0, 0);
}
</style>
